<template>
    <view class="container">
        <!-- 药品组合列表区域 -->
        <view class="group-list">
            <!-- 使用 uni-swipe-action 和 uni-swipe-action-item 实现左滑删除 -->
            <uni-swipe-action>
                <uni-swipe-action-item
                    v-for="(group, index) in this.groupStore.category"
                    :key="index"
                    :right-options="[
                        {
                            text: '删除',
                            style: {
                                backgroundColor: '#dd524d'
                            },
                        }
                    ]"
                    @click="handleDeleteGroup(group.id)"
                >
                    <view class="group-item">
                        <view class="group-info">
                            <text class="group-name">{{ group.categoryName }}</text>
                            <text class="group-medicines">{{ group.drugs }}</text>
                        </view>
                        <view class="group-detail">
                            <!-- 详情按钮 -->
                            <button class="detail-btn" size="mini" @click="goToGroupDetail(group.id,group.categoryName)" plain>详情</button>
                        </view>
                    </view>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </view>
    </view>
</template>

<script>
import { useGroupStore } from '@/store/group';
const groupStore = useGroupStore();

export default {
    setup() {
        return {
            groupStore
        };
    },
    data() {
        return {
            swipeAction: null // 用于控制滑动操作
        };
    },
    onLoad() {
        this.groupStore.getAllGroupById();
    },
    methods: {
        goToGroupDetail(id,name) {
            uni.navigateTo({
                url: `/subpkgDetail/drugGroupDetail/drugGroupDetail?id=${id}&name=${name}`
            });
        },
        async handleDeleteGroup(id) {
            try {
                // 调用删除药品组合的方法
                await this.groupStore.deleteGroup(id);
                // 删除成功后，关闭滑动操作
                if (this.swipeAction) {
                    this.swipeAction.close();
                }
                // 显示删除成功的提示
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                });
            } catch (error) {
                console.error('删除药品组合失败:', error);
                uni.showToast({
                    title: '删除失败',
                    icon: 'none'
                });
            }
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

// 药品组合列表区域样式
.group-list {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .group-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .group-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .group-name {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 16rpx;
            }

            .group-medicines {
                font-size: 24rpx;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 400rpx; // 限制最大宽度，根据需要调整
            }
        }

        .group-detail {
            .detail-btn {
                font-size: 24rpx;
                color: #2ac2d1;
                border-color: #2ac2d1;

                &::after {
                    border-color: #2ac2d1;
                }
            }
        }
    }
}
</style>